<template>
    <div class="editor" id="editor">
        <el-form :model="articleForm" ref="articleForm" style="width: 90%" label-width="15%">
           <el-form-item prop="title" label="文章标题" :rules="[{required: true}]">
              <el-input 
                  placeholder="请输入文章标题"
                  v-model="articleForm.title" >
              </el-input>
           </el-form-item>
           <el-form-item prop="type" label="选择文章类型">
                    <el-select v-model="articleForm.type"  placeholder="请选择文章类型">
                        <el-option v-for="item in articleTypes()" 
                            :key="item.value"
                            :label="item.label" 
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
           <el-form-item prop="author" label="文章作者" :rules="[{required: false}]">
              <el-input 
                  placeholder="请输入文章作者"
                  v-model="articleForm.author" >
              </el-input>
           </el-form-item>
           <el-form-item prop="html" label="文章内容" :rules="[{required: true}]">
               <vue-html5-editor :content="articleForm.html"  :height="500" @change="updateData"></vue-html5-editor>
           </el-form-item>
           <el-form-item prop="remark" label="文章备注" :rules="[{required: false}]">
              <el-input 
                  placeholder="请输入文章备注"
                  v-model="articleForm.remark" >
              </el-input>
           </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('articleForm')">{{updateFlag ? '修改' : '提交'}}</el-button>
          <el-button type="primary" @click="resetForm('articleForm')">重置信息</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
     </div>
     
 </template>

<script>
    import EditorJs from './Editor.js';
    module.exports = EditorJs;
</script>

<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
</style>
